<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
        <title>MeteoCal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    </head>
    <body>
        <div id='page'>
            <div id="meteoCalLogo" style="position: absolute; top: 50px; right: 50px;">
                <a href='#'><img src='webapp/images/logo.png' alt="logo"/>
                </a>
            </div>
            <div id='title' style="font-size: 30px; color: blue; font-family: cursive;" >
                <p> MeteoCal</p>  <br />
                <p> Simplify your life, enjoy your events! </p> 
            </div>
            <div id='description' style=" font-size: 30px; color:blue;  height: content-box; width: content-box;">
                <p>MeteoCal is a weather based calendar. Create events and invite your friends!</p>

                <div style="font-size: 25px; bottom:50px; left: 20%; right:20%">
                    <h:link outcome="login" value="Login" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <h:link outcome="registration" value="Register" />
                </div>
            </div>
            <div style="width: 100%; position: fixed; bottom: 10px; overflow: hidden;"> MeteoCal also use the weather service <a href="http://openweathermap.org/"> OpenWeatherMap </a>, which will provide constant and detailed information about the events that interest you
            </div>
        </div>
    </body>
</html>